$( document ).ready(function() {

	//*******************************************
	/*	BOOTSTRAP TOUR
	/********************************************/

	var kingTour = new Tour({
		basePath: '/jDev5',
		steps: [
			{	
				element: "#tour-searchbox",
				title: "Bootstrap Tour <span class=\"badge element-bg-color-blue\">New</span>",
				content: "<p>Hello there, this tour can <strong>guide new user</strong> or show new feature/update on your website. " + 
				"Oh and why don't you try search <em>'sales'</em> here to see Widget Live Search on action.</p>" + 
				"<p><em>To navigate the site please follow the tour first or click \"End tour\".</em></p>",
				placement: "bottom"
			},
			{
				path: "/index.php?option=com_gpcb&view=components&layout=default",
				element: "#sales-stat-tab",
				title: "Dynamic Content",
				content: "You can select statistic view based on predefined period here."
			},
			{
				path: "/index.php?option=com_gpcb&view=components&layout=default",
				element: "#tour-focus",
				title: "Focus Mode",
				content: "Focus your attention and hide all irrelevant contents.",
				placement: "left"
			},
			{
				element: ".del-switcher-toggle",
				title: "Color Skins",
				content: "Open the hidden panel here by clicking this icon to apply built-in skins.",
				placement: "left",
				backdrop: true
			},
			{
				element: "#start-tour",
				title: "Start/Restart Tour",
				content: "Click this link later if you need to <strong>restart the tour</strong>.",
				placement: "bottom",
				backdrop: true
			}
		],
		template: "<div class='popover tour'> " +
						"<div class='arrow'></div> " +
						"<h3 class='popover-title'></h3>" +
						"<div class='popover-content'></div>" +
						"<div class='popover-navigation'>" +
							"<button class='btn btn-default' data-role='prev'>« Prev</button>" +
							"<button class='btn btn-primary' data-role='next'>Next »</button>" +
							"<button class='btn btn-default' data-role='end'>End tour</button>" +
						"</div>" +
					"</div>",
		onEnd: function(tour) {
			$('#start-tour').prop('disabled', false);
		}
	});
	
	kingTour.init();

	$('#start-tour').click( function() {
		if(kingTour.ended()) {
			kingTour.restart();
		}else {
			kingTour.start();
		}

		$(this).prop('disabled', true);
	});
});